<template>
  <div class="home">
    <div class="left">
      <div class="title">
        <div  :class="state.activeTab=== 0 ? 'titleItem active' : 'titleItem' " @click="actice(0)">任务表</div>
        <div  :class="state.activeTab=== 1 ? 'titleItem active' : 'titleItem' " @click="actice(1)">进行中</div>
        <div  :class="state.activeTab=== 2 ? 'titleItem active' : 'titleItem' " @click="actice(2)">已完成</div>
        <div  :class="state.activeTab=== 3 ? 'titleItem active' : 'titleItem' " @click="actice(3)">已结束</div>
      </div>
      <div class="content">
        <div class="contentArr">
          <taskContent :tableData="state.tableData" @godetail="goDetail"
                       @goseekhelpdetail="goSeekHelpDetail" @edit="edit" @deletes="deletes"
                       @deletesend="deletesEnd"
          ></taskContent>
        </div>
        <div v-if="state.tableData.length === 0" class="el-center">
          <div class="home">
            <svg class="icon-svg banner-img" aria-hidden="true">
              <use xlink:href="#icon-home-banner"></use>
            </svg>
            <div class="color">空空如也~</div>
          </div>
        </div>
        <div class="foot" v-else>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="state.total"
            :page-size="state.pagesize"
            :current-page="state.currentPage"
            @current-change="currentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
     <div class="right">
        <user-login type="1"></user-login>
       <div class="gg"></div>
        <div class="rightBottom">
            <div class="title">
              消息公告
            </div>
            <user-message></user-message>
        </div>
     </div>
  </div>
</template>
<script>
import userLogin from '@/components/user/userLogin'
import userMessage from '@/components/user/userMessage'
import taskContent from '@/components/user/taskContent'
import { getCurrentInstance, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
const state = reactive({
  activeTab : 0,
  tableData: [
  ],
  total: 0,
  currentPage: 1,
  pagesize: 6,
  page: 1,
  router: '',
  is_del: 0
});
export default {
  name: 'basicList',
  components: { userLogin, userMessage, taskContent },
  onMounted(){
    console.log('执行了')
  },
  setup(props,{emit}) {
    const ctx = getCurrentInstance();
    const _this = ctx.appContext.config.globalProperties
    const router = useRouter();

    function goDetail(index,rec_id){
      router.push({
        name:'basicListDetail',
        query:{
          id: index,
          rec_id:rec_id
        }
      })
    }
    //获取任务列表
    const taskList = () => {
      _this.$request({
        url: "?s=Learn.Task.GetTask",
        params: {page:state.page,pageSize:state.pagesize,status:1,task_type:1,is_del:state.is_del},
      })
        .then((res) => {
            if(res.ret == 200) {
                if (state.page == 1) {
                  state.tableData = []
                }
                state.tableData = res.data.data
                state.total = res.data.total
            }
            setTimeout(function () {
              state.router = router.currentRoute.value.name
            }, 1000)
        })
    }
    const currentChange = (val) => {
      if (val !== state.page) {
            state.page = val
            if(state.activeTab == 1 || state.activeTab == 2){
                return taskListOrder()
            } else {
                return taskList()
            }

      }
    }
    const goSeekHelpDetail = (index) => {
      let status = state.tableData[index].recStatus
      let id = state.tableData[index].id
      if(status === 0){
        //领取
        return receive(id,index);
      }
    }
    //领取
    const receive = (id,index) => {
      _this.$request({
        url: "?s=Learn.Task.RecTask",
        params: {task_id:id},
      })
        .then((res) => {
          if(res.ret === 200){
            state.tableData[index].recStatus = 1
            state.tableData[index].rec_id = res.data
            ElMessage.success({
              message: '领取成功',
              type: 'success'
            })
          }else{
            ElMessage.error(res.msg);
          }
        })
    }
    const actice = (index = undefined) => {
      if(index!==undefined) {
          state.activeTab = index
      }else{
          state.activeTab = 0
      }
      let type = state.activeTab
      state.page = 1
      if(type == 3){
          state.is_del = 3
          return taskList()
      }
      if(type == 0){
        state.is_del = 0
        if(router.currentRoute.value.name == state.router && index === undefined){
            let isList = localStorage.getItem('isDetail')
            if(isList == 1){
                localStorage.removeItem('isDetail')
                return taskList()
            }else {
                //当前页路由刷新则阻止
              return
            }
        }
        return taskList()
      }else if(type == 1 || type == 2){
        return taskListOrder(type)
      }
    }
    //已领取 已完成
    const taskListOrder = (type) => {
      _this.$request({
        url: "?s=Learn.Task.GetRecTask",
        params: {page:state.page,pageSize:state.pagesize,status:state.activeTab,task_type:1},
      })
        .then((res) => {
          state.tableData = res.data.data
          state.total = res.data.total
        })
    }
    const edit = (index) => {
        let id = state.tableData[index].id
        router.push({
            name:'task-releaseTask',
            query:{
              id: id
            }
        })
    }
    const deletes = (index) => {
      let id = state.tableData[index].id
      ElMessageBox.confirm("确认后将无法恢复", "您确定要删除该任务吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          _this.$request({
            url: "?s=Learn.Task.DelTask",
            params: {
              task_id : id,
              is_del: 1
            },
          }).then(res=>{
              localStorage.setItem('isDetail',1)
              actice()
          });
        })
        .catch(() => {
        });
    }

    /**
     * 结束任务
     */
    const deletesEnd = (index) => {
      let id = state.tableData[index].id
      ElMessageBox.confirm("确认后将结束任务哦", "您确定要结束该任务吗?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
      })
        .then(() => {
          _this.$request({
            url: "?s=Learn.Task.endTask",
            params: {
              task_id : id,
              is_del: 3
            },
          }).then(res=>{
            localStorage.setItem('isDetail',1)
            actice()
          });
        })
        .catch(() => {
        });
    }
    onMounted(actice);
    return{
      state,
      router,
      goDetail,
      taskList,
      currentChange,
      goSeekHelpDetail,
      receive,
      actice,
      edit,
      deletes,
      deletesEnd
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-input__prefix{
  color: #359EFFFF;
  font-size: 16px;
}
.el-center {
  text-align: center;
  padding-top: 50px;
  color: #9e9e9e;
}
.gg {
  height: 20px;
  width: 100%;
  background: #F0F2F5;
}
.home {
  display: flex;
  width: 100%;
  height:  calc(calc(100vh - 64px) - 40px - 70px);
   .right {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      .rightBottom {
          background-color: #fff;
          flex: 1;
            .title {
                  border-bottom: 1px solid #E9E9E9;
                  padding-left: 24px;
                  display: flex;
                  align-items: center;
                  font-size: 16px;
                  height: 55px;
            }
      }
   }
}
.left {
  flex: 2;
  background-color: #fff;
  height: 100%;
  margin-right: 24px;
  .title {
    display: flex;
    border-bottom: 1px solid #E9E9E9;
    box-sizing: border-box;
    align-items: center;
    height: 55px;
    .active{
      // border-bottom: 2px solid #1890FFFF;
      color: #1890FFFF !important;
      position: relative;
    }

    .active:after{
      content:'';
      position: absolute;
      bottom: -102%;
      left: 0%;
      height: 2px;
      width: 50px;
      background-color: #1890FFFF;
    }
    .titleItem {
      margin-left: 32px;
      font-size: 16px;
      font-weight: 600;
      color: #888888FF;
      cursor: pointer;
    }
  }

  .content {
    padding-left: 23px;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    height: calc(calc(100vh - 64px) - 40px - 70px - 55px);
    .contentArr{

      display: flex;
      flex-direction: column;
      .contentItem:nth-child(1) {
        border-top: 0px ;
      }
      .zz {
        position: absolute;
        top: 0;
        height: 100%;
        width: 80%;
      }
      .contentItem {
        position: relative;
        height: 100%;
        border-top: 1px solid #E9E9E9;
        display: flex;
        align-items: center;
        font-size: 14px;
        padding: 10px;
        .icon {
          width: 48px;
          height: 48px;
          color: #fff;
          border-radius: 2px;
          background-color: #36CFC9FF;
          display: grid;
          place-items: center;
          font-weight: 600;
          font-size: 16px;
        }

        .text {
          cursor: pointer;
          margin-left: 24px;
          flex: 3;
          margin-right: 20px;
          .textTitle {
            color: #000000A6;
            font-weight: 600;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
          .desc {
            padding-top: 10px;
            color: #00000073;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }

          p {
            color: #00000073;
          }
        }

        .integralIcon{
          flex: 1;
          display: flex;
          align-items: center;
          padding-top: 18px;
          img{
            width: 22px;
            height: 22px;
          }
          span {
            color: #00000073;
            font-size: 14px;
            margin-left:2px;
          }
        }
        .btn {
          margin-right: 58px;

          .taskBtn{
            width: 74px;
            height: 32px;
            display: grid;
            place-items: center;
            color:#1890FFFF;
            border: 1px solid #1890FFFF;
            cursor: pointer;
            z-index: 2;
          }
          .taskingBtn{
            width: 74px;
            height: 32px;
            display: grid;
            place-items: center;
            color:#1890FFFF;
            border: 1px solid #1890FFFF;
            cursor: pointer;
            opacity: 0.5;
          }
        }
      }
    }

    .foot{
        position: absolute;
        bottom: 74px;
        left: 50%;
        margin-top: -200px;    /* 高度的一半 */
        margin-left: -300px;    /* 宽度的一半 */
    }
  }
}
</style>
